<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>招生数据分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/public.css" rel="stylesheet" type="text/css"/>
    <style>
        #myTab{
            margin-right: 100px;
        }
        #myTab li{
            float: right;
            margin-left: 20px;
        }
        #myTab li:nth-of-type(2){
            border-bottom: 2px solid #3398DB;
        }
        #myTab li:nth-of-type(1){
            margin-right: 100px;
        }
    </style>
    <script src="__PUBLIC__/js/echarts.common.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div class="layui-conter" style="height: 100%">
    <div class="layui-col-md12" style="height: 100%">
        <div class="navigation" >
            <span>数据></span><span>数据分析></span><span>招生数据分析</span>
        </div>

        <div class="white-conter" style="height: 90%;" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="title-blue"><b>课程热度分析</b></div>
                </div>
            </div>
            <ul id="myTab" class="nav nav-tabs" style="height: 80%;margin-top: 100px">
                <li class="active">
                    <a href="#chart1" data-toggle="tab">全年</a>
                </li>
                <li>
                    <a href="#container" data-toggle="tab" onclick="javascript:chartresize()" style="color:#3398DB;">本月</a>
                </li>
                <li>
                    <a href="#chart2" data-toggle="tab" onclick="javascript:chartresize()">今日</a>
                </li>
                <div class="tab-content" style="height: 100%;">
                    <div class="tab-pane fade in active" id="chart1" ></div>
                    <div class="tab-pane fade" id="container" style="height: 100%;"></div>
                    <div class="tab-pane fade in active" id="chart1"></div>
                </div>
            </ul>
        </div>

    </div>
</div>
</body>
<script>
var dom = document.getElementById("container");
//自适应宽高
var myChartContainer = function () {
    dom.style.width = window.innerWidth-160+'px';
    // dom.style.height = window.innerHeight+'px';
};

myChartContainer();

var myChart = echarts.init(dom);
var app = {};   
option = null;
app.title = '坐标轴刻度与标签对齐';

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['确定','不确定'],
        left:"100px",
        top:'0px',
        textStyle:{
            fontSize:20,
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        containLabel: true
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    axisPointer: { // 会出现横竖2个方向的指示器
        show: true,
        type: 'line',
        label:{
            show: false, //不显示指示器的文本标签
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: ['20%','20%'],
        data: ['A1','B1','C1','D1','A2','B2','C2','D2','A3','B3','C3','D3','A4','B4','C4','D4'],
        axisLabel: {        
                    show: true,    //这行代码控制着坐标轴x轴的文字是否显示
                      textStyle: {
                          color: '#666',   //x轴上的字体颜色
                          fontSize:'16'    // x轴字体大小
                      }
                  },
        axisLine:{
                show:false
            },
        axisTick: {
            show: false
            }, 
    },
    yAxis: {
        type: 'value',
        nameTextStyle:{
                fontSize:16,  
                padding:30
            },    
        data:[0,10,20,30,40,50,60,70,80,90,100],
        axisLabel: {        
                    show: true,    //这行代码控制着坐标轴x轴的文字是否显示
                      textStyle: {
                          color: '#666',   //x轴上的字体颜色
                          fontSize:'16'    // x轴字体大小
                      }
                  },
        axisLine:{
                show:false
            },
        axisTick: {
            show: false
            }, 
        offset:20, 
        splitNumber:10
                 
    },
    series: [
        {
            name:'确定',
            type:'line',
            data:[25,40,35,42,46,61,55,90,70,68,79,62,50,53,62,50],
            itemStyle : {
                    normal : {
                        color:"#0090ff",
                        lineStyle:{ 
                            color:'#0090ff',
                            width:5
                        }
                    }
            },
            symbol:"circle",
            symbolSize:26,
        },
        {
            name:'不确定',
            type:'line',
            data:[78,70,68,96,62,50,53,62,40,35,42,46,61,55,80,40],
            itemStyle : {
                    normal : {
                        color:"orange",
                        lineStyle:{
                            color:'orange',
                            width:5                                    
                        }
                    }
            },
            symbol:"circle",
            symbolSize:26,
            
        }
    ]
};

if (option && typeof option === "object") {
    myChart.setOption(option, true);
}


 //浏览器大小改变时重置大小
 window.onresize = function () {
    myChartContainer();
    myChart.resize();
};
</script>
<script src="__PUBLIC__/js/layui.all.js"></script>
</html>